<template>
  <div class="">
    <cus-search>
      <cus-search-item>
        <Form :model="form" :label-width="80">
          <FormItem label="筛选时间" class="mr_48 mb_20">
            <cus-cascadeDate :startTime.sync="form.startTime" :endTime.sync="form.endTime" :need-init="false"
                             :only-month="true" type="datetime"></cus-cascadeDate>
          </FormItem>
          <cusButton class="mr_10 mb_20" type="primary" @onClick="()=>{this.pages.page=1;this.onInit()}">查询</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card title="伙食管理登记薄查询" class="mt_20">
      <cusTable border :loading="form.loading" :columns="columns" :data="data" :size="vuex_config.tableSize" :bottomClass="['cus-page']">
        <template slot-scope="{row}" slot="huoshiDate">
          {{new Date().getTime(row.huoshiDate) | formatTime}}
        </template>
        <!-- <template slot-scope="{row}" slot="gmtCreate">
          {{row.gmtCreate | formatTime('yyyy-MM-dd hh:mm:ss')}}
        </template> -->
        <template slot-scope="{ row, index }" slot="operation">
          <div class="flex">
            <cus-button type="text" size="small" :style="{color: '#1E6FFF',padding: '0 8px'}" @onClick="onCheck(row)">
              查看
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
        <cus-page :data="pages" class="mt_20" @pageChange="onInit"></cus-page>
      </div>
    </cus-card>
  </div>
</template>
<script>
import {getRegisterRecordList} from '@/api/business/business';

export default {
  name: '',
  data() {
    return {
      mode: 1,
      form: {
        startTime: '',
        endTime: '',
        loading: false,
      },
      columns: [
        {
          title: '序号',
          width: 70,
          key: 'name',
          type: 'index',
          align: 'center'
        },
        {
          title: '就餐时间',
          minWidth: 120,
          slot: 'huoshiDate',
          align: 'center'
        },
        {
          title: '就餐凭证',
          minWidth: 120,
          key: 'certname',
          align: 'center'
        },
        {
          title: '单位名称',
          minWidth: 120,
          key: 'department',
          align: 'center'
        },
        {
          title: '操作',
          width: 120,
          fixed: 'right',
          slot: 'operation',
          align: 'center'
        },
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
    }
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getRegisterRecordListApi();
    },
    onCheck({huoshiId}) {
      this.$router.push({
        path: `/view/dinnerManage/dinnerRegister?id=${huoshiId}`
      })
    },
    // 获取伙食登记薄列表
    getRegisterRecordListApi() {
      this.form.loading = true;
      return new Promise(resolve => {
        getRegisterRecordList({
          starttime: this.form.startTime,
          endtime: this.form.endTime,
          current: this.pages.page,
          size: this.pages.pageSize,
        }).then(res => {
          if (res.errorcode === 0) {
            console.log(res);
            this.form.loading = false;
            this.data = res.huoshilist;
            this.pages.pageTotal = res.totalcount;
            resolve();
          } else this.form.loading = false;
        })
      })
    },
  }
}
</script>

<style scoped lang="scss"></style>
